<script setup>
import {ref, onMounted} from 'vue'
import { CScrollbar } from 'c-scrollbar'
import Pager from '@/components/pager/Pager.vue'
import { selDeptsApi, selUsersApi } from '@/commons/api'

// 定义父组件传来的参数
const props = defineProps({
  users: {
    type: Array,
    required: false,
    default: []
  }
})

// 自动加载父组件传来的用户数组
onMounted(() => {
  usrSelList.value = props.users && props.users.length>0 ? props.users : []
})

// selUsers 选择用户
const usrModalShow = ref(false)
const selUsers = () => {
  selDepts()
  usrModalShow.value = true
}

// 定义子组件调用父组件的方法
const emits = defineEmits(['setUsers'])
// delUsr 删除选中的用户
const delUsr = (index) => {
  usrSelList.value.splice(index, 1)
  emits('setUsers', usrSelList.value)
}

// setUsers 赋值
const setUsers = () => {
  usrModalShow.value = false
  usrSchRef.value = {
    keywords: '',
    deptId: '',
    offset: 0,
    limit: 20
  }
  emits('setUsers', usrSelList.value)
}

// selDept 获取部门下拉列表
const deptList = ref([])
const selDepts = async () => {
  const res = await selDeptsApi({ kind: 2, typeCode: 'SYS_DEPT'})
  if(res.code === import.meta.env.VITE_SUCCESS_CODE) {
    deptList.value = res.data
    await selUser(0, 1)
  }
}

const usrSchRef = ref({
  keywords: '',
  deptId: '',
  offset: 0,
  limit: 20
})

const usrTotal = ref(0)
const usrCurPage = ref(1)
const usrList = ref([])
const usrHasData = ref(false)
const usrSelList = ref([])
// selUser 列表展示
const selUser = async (offset, cur) => {
  usrSchRef.value.offset = offset || 0
  usrCurPage.value = cur || 1
  usrHasData.value = false
  const res = await selUsersApi(usrSchRef.value)
  if(res.code === import.meta.env.VITE_SUCCESS_CODE && res.data && res.data.total>0) {
    usrHasData.value = true
    usrTotal.value = res.data.total
    usrList.value = res.data.list
    usrAllCheck.value = false
    usrList.value.forEach(usr => {
      usrSelList.value.forEach(cur => {
        if(usr.userId === cur.userId) {
          usr.chked = true
        }
      })
    })
  }
}

// schUser 筛选
const usrSchShow = ref(false)
const schUser = () => {
  usrSchShow.value = !usrSchShow.value
}

// clrUsrSch 重置搜索框
const clrUsrSch = () => {
  usrSchRef.value = {
    keywords: '',
    deptId: '',
    offset: 0,
    limit: 20
  }
}

// 选择效果实现
const usrAllCheck = ref(false)
// checkAllUsr 全选
const checkAllUsr = () => {
  usrAllCheck.value = !usrAllCheck.value
  if(usrAllCheck.value) {
    usrList.value.forEach(item => {
      if(usrSelList.value && usrSelList.value.length>0) {
        let exists = false
        usrSelList.value.forEach(cur => {
          if(item.userId === cur.userId) {
            exists = true
          }
        })
        if(!exists) {
          usrSelList.value.push(item)
          item.chked = true
        }
      } else {
        usrSelList.value.push(item)
        item.chked = true
      }
    })
  } else {
    usrList.value.forEach(item => {
      item.chked = false
      usrSelList.value.splice(usrSelList.value.findIndex(curUser => curUser.userId === item.userId), 1)
    })
  }
}
// checkCurUsr 单选
const checkCurUsr = (user) => {
  if(!user.chked) {
    usrSelList.value.push(user)
  } else {
    usrSelList.value.splice(usrSelList.value.findIndex(curUser => curUser.userId === user.userId), 1)
  }
  user.chked = !user.chked
}

//clrAllUsr 清除所有选择的用户
const clrAllUsr = () => {
  usrSelList.value= []
  usrList.value.forEach(item => {
    item.chked = false
  })
  selUser(0, 1)
}

// setDept 选中部门
const setDept = (deptId) => {
  if(deptId === usrSchRef.value.deptId) {
    deptList.value.forEach(curDept => {
      curDept.chked = false
    })
    usrSchRef.value.deptId = ''
    selUser(0, 1)
  } else {
    deptList.value.forEach(curDept => {
      curDept.chked = false
      if(deptId === curDept.dictId) {
        curDept.chked = true
        usrSchRef.value.deptId = curDept.dictId
      }
    })
    selUser(0, 1)
  }
}
</script>

<template>
  <div>
    <div class="du-a">
      <div class="du-b btn-pi mr15" title="选择用户" @click="selUsers()"><i class="iconfont">&#xe8f6;</i> 选择用户</div>
      <div class="du-c btn-d mr15" v-for="(curUser, index) in usrSelList" :key="curUser.userId">
        <span> {{ curUser.nickName }}({{ curUser.roleName }})[{{ curUser.deptName }}]</span>
        <span class="du-s" @click="delUsr(index)"><i class="iconfont">&#xea7f;</i></span>
      </div>
    </div>
    <transition name="fade-mod" appear>
      <div v-if="usrModalShow" class="modal-backdrop">
        <div class="modal du-d">
          <div class="modal-header">
            <div class="header-left"><i class="iconfont fs20">&#xe8f6;</i> 选择用户</div>
            <div class="header-right" @click="setUsers()"><i class="iconfont fs20">&#xea7f;</i></div>
          </div>
          <div class="modal-body du-e">
            <div class="du-f">
              <div class="du-g">
                <c-scrollbar v-if="deptList && deptList.length>0">
                  <div v-for="curDept in deptList" :key="curDept.dictId" :class="[curDept.chked ? 'du-i' : 'du-h']" :style="{'padding-left': curDept.level*15+'px'}" @click="setDept(curDept.dictId)">{{curDept.dictName}} ({{ curDept.nums }})</div>
                </c-scrollbar>
                <div v-else class="no-data">暂无内容</div>
              </div>
              <div class="du-j">
                <c-scrollbar>
                  <!-- 头部用户 -->
                  <div class="du-k">
                    <div class="btn-r mr15" title="筛选" @click="schUser()"><i class="iconfont">&#xea49;</i></div>
                    <div class="btn-r mr15" title="刷新" @click="selUser(0, 1)"><i class="iconfont">&#xea8c;</i></div>
                    <div class="btn-r mr15" title="清除选择" @click="clrAllUsr()"><i class="iconfont">&#xea45;</i></div>
                    <div class="du-l">已选择了 <span class="du-m"> {{ usrSelList.length }} </span> 位成员</div>
                  </div>
                  <!-- 中部数据 -->
                  <div class="du-n" v-if="usrSchShow">
                    <div class="du-o"><input type="text" v-model="usrSchRef.keywords" placeholder="请输入关键字" class="du-p" /></div>
                    <div class="du-q">
                      <div class="btn-pi mr15" @click="selUser(0, 1)"><i class="iconfont">&#xea8e;</i> 搜索</div>
                      <div class="btn-d" @click="clrUsrSch()"><i class="iconfont">&#xea4f;</i> 重置</div>
                    </div>
                  </div>
                  <div class="du-r" v-if="usrHasData">
                    <table>
                      <tbody>
                        <tr>
                          <th style="width: 10%;"><i @click="checkAllUsr()" :class="['iconfont', usrAllCheck ? 'chked' : 'chk']" v-html="usrAllCheck ? '&#xea3a;' : '&#xea46;'"></i></th>
                          <th style="width: 30%;">部门</th>
                          <th style="width: 30%;">角色</th>
                          <th style="width: 30%;">昵称</th>
                        </tr>
                        <tr v-for="curUser in usrList" :key="curUser.userId" class="tr-style">
                          <td class="txt-center"><i @click="checkCurUsr(curUser)" :class="['iconfont', curUser.chked ? 'chked' : 'chk']" v-html="curUser.chked ? '&#xe685;' : '&#xe686;'"></i></td>
                          <td class="txt-center">{{curUser.deptName}}[{{ curUser.deptCode }}]</td>
                          <td class="txt-center">{{curUser.roleName}}</td>
                          <td class="txt-center">{{curUser.nickName}}</td>
                        </tr>
                      </tbody>
                    </table>
                    <pager v-if="usrHasData" :limit="usrSchRef.limit" :total="usrTotal" :page="usrCurPage" @turn="selUser" />
                  </div>
                  <div v-else class="no-data">暂无内容</div>
                </c-scrollbar>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="btn-pi" @click="setUsers()"><i class="iconfont">&#xea7c;</i> 确定</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.du-a {width: 100%; display: flex; display: -webkit-flex; flex-wrap: wrap;}
.du-b {width: 100px; margin-bottom: 10px;}
.du-c {display: flex; display: -webkit-flex; margin-bottom: 10px;}
.du-d {width: 900px; height: calc(100% - 12px);}
.du-e {height: calc(100% - 140px);}
.du-f {height: 100%; display: flex; display: -webkit-flex;}
.du-g {width: 200px; padding: 0 15px 0 0;}
.du-h {line-height: 35px; cursor: pointer;}
.du-h:hover {background-color:#F2F2F2;}
.du-i {line-height: 35px; font-weight: bold; color: #67C23A; cursor: pointer;}
.du-j {flex-grow: 1; height: 100%;}
.du-k {padding: 10px 20px; display: flex; display: -webkit-flex;}
.du-l {line-height: 34px;}
.du-m {font-weight: bold; color: #E6A23C;}
.du-n {margin: 0 10px 10px 10px; border: 1px solid #CCC; display: flex; display: -webkit-flex; padding: 0 15px 15px 15px; flex-wrap: wrap; justify-content: flex-end;  }
.du-o {flex-grow: 1; margin-top: 15px;}
.du-p {width: 230px; padding: 8px;}
.du-q {display: flex; display: -webkit-flex; padding-top: 15px;}
.du-r {background-color: #FFF;}
.du-s {padding-left: 15px;}
</style>
